<!--
 * @Author: 黄达全
 * @Date: 2024-08-03 17:51:14
 * @LastEditTime: 2024-08-17 19:16:45
-->
<script lang="ts" setup>
import drawer from "@/components/drawer.vue"
import { ref, reactive } from "vue"
import ImageApi from "@/api/model/image"
import type { ImageInsertVO } from "@/common/type"
import useElementPlus from "@/hooks/useElementPlus"

const pictureDrawerRef = ref()
const categoryForm = reactive({
    name: "",
    order: 1
})

const edit_active_id = ref<number>()
// 打开编辑弹窗
const editPictureCategory = (item: ImageInsertVO) => {
    edit_active_id.value = item.id
    categoryForm.name = item.name
    categoryForm.order = item.order
    pictureDrawerRef.value.open()
}
const { message } = useElementPlus()
const editSubmitHandle = async () => {
    const { code } = await ImageApi.update({ id: edit_active_id.value as number, ...categoryForm })
    if (code == 1) {
        getCategoryData()
        message({
            message: "修改图片分类成功",
            type: "success"
        })
    }

    pictureDrawerRef.value.close()
}

// 分页
const page = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)
const imageCategoryList = ref<ImageInsertVO[]>([])
const getCategoryData = async () => {
    // 获取分类数据
    const res = await ImageApi.page(page.value, pageSize.value)
    total.value = res.data.total
    imageCategoryList.value = res.data.records
}
const pageChangeHandler = (e: number) => {
    page.value = e
    getCategoryData()
}
getCategoryData().then(() => {
    toggleCategory(imageCategoryList.value[0].id)
})

// 激活状态
const active = ref<number>()
const toggleCategory = (id: number) => {
    active.value = id
}

// 删除分类
const deleteCategory = async (id: number) => {
    const { code } = await ImageApi.delete(id)
    if (code == 1) {
        getCategoryData()
        message({
            message: "删除图片分类成功",
            type: "success"
        })
    }
}

defineExpose({
    getCategoryData,
    active
})
</script>

<template>
    <div class="category">
        <div class="category-box">
            <div class="category-item" v-for="item in imageCategoryList" :key="item.id" @click="toggleCategory(item.id)"
                :class="{ 'active': active === item.id }">
                <div class="category-item-title">{{ item.name }}</div>
                <div class="icon">
                    <el-icon size="14" color="var(--primary-theme-color)"
                        @click.stop="editPictureCategory(item)"><el-icon-edit /></el-icon>

                    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="el-icon-InfoFilled"
                        icon-color="#626AEF" title="是否删除此分类?" @confirm="deleteCategory(item.id)">
                        <template #reference>
                            <el-icon @click.stop size="14" color="#C43D3E"><el-icon-close /></el-icon>
                        </template>
                    </el-popconfirm>

                </div>
            </div>
        </div>
        <div class="page">
            <el-pagination size="small" background layout="prev, pager, next" :total="total" :pager-count="5"
                :current-page="page" @current-change="pageChangeHandler" />
        </div>

    </div>
    <drawer ref="pictureDrawerRef" title="修改图片分类" direction="ttb" size="20%" @submit="editSubmitHandle">
        <template #ttb>
            <el-form label-width="80px" :inline="true">
                <el-form-item label="分类名称">
                    <el-input v-model="categoryForm.name" placeholder="请输入分类名称" />
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="categoryForm.order" :min="1" />
                </el-form-item>
            </el-form>
        </template>
    </drawer>
</template>

<style lang="scss" scoped>
.category {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .category-box {
        flex: 1;

        .category-item {
            height: 50px;
            border-bottom: 1px solid #f0f0f0;
            transition: var(--el-transition-duration);
            display: flex;
            &:hover{
                cursor: pointer;
            }

            &:nth-child(odd) {
                background-color: #FFFFFF;
            }

            &:nth-child(even) {
                background-color: #FAFAFA;
            }

            &:hover {
                background-color: #F3F5FE;
            }

            .category-item-title {
                flex: 1;
                display: flex;
                align-items: center;
                padding-left: 15px;
            }

            .icon {
                width: 35px;
                display: flex;
                align-items: center;
                padding-right: 10px;
                justify-content: flex-end;
                gap: 5px;
                box-sizing: content-box;

            }
        }

        .active {
            background-color: var(--primary-theme-color-active) !important;
        }
    }

    .page {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.el-form {
    height: 35px;
    flex: 1;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: var(--primary-theme-color) !important;
    color: #FFFFFF;
}
</style>
